<template>
	<view class="wrap" >
		<view class="zi">
			HELLO
			<view class="zi-dingwei">
			</view>
		</view>
		<view class="zh">
			综合办公信息系统
		</view>
		<view class="biaodan">
			<view class="li-item">
				<image class="item-img" src="/static/icon/phone.png" mode="heightFix"></image>
				<view class="li-item-txt">
					手机号码
				</view>
			</view>
			<view class="li-item">
				<u-input placeholder-style="font-size: 26rpx;color: #999999;" type="number" class="inputstyle" v-model="form.account" placeholder-class="plstyle" placeholder="请输入手机号"/>		
			</view>
			<!-- 密码登录 -->
			<view v-if="loginFs == 0">
				<view class="li-item" style="margin-top: 45rpx;">
					<image class="item-img" src="/static/icon/password.png" mode="heightFix"></image>
					<view class="li-item-txt">
						密码
					</view>
				</view>
				<view class="li-item">
					<u-input placeholder-style="font-size: 26rpx;color: #999999;" type="password" v-model="form.password"  class="inputstyle"  placeholder-class="plstyle" placeholder="请输入密码"/>		
				</view>
			</view>
			<view v-else>
				<!-- 手机验证码登录 -->
				<view class="li-item" style="margin-top: 45rpx;">
					<image class="item-img" src="/static/icon/password.png" mode="heightFix"></image>
					<view class="li-item-txt">
						验证码
					</view>
				</view>
				<view class="li-item">
					<u-input placeholder-style="font-size: 26rpx;color: #999999;" type="number" v-model="form.captcha"  class="inputstyle"  placeholder-class="plstyle" placeholder="请输入验证码"/>		
				</view>
			</view>
			<view class="captcha" v-if="loginFs == 1">
				<u-verification-code seconds="60" @end="end" @start="start" ref="uCode" 
						@change="codeChange"></u-verification-code>
						<u-button hover-class="captcha-buttonhovwer" class="captcha-button" type="default" @tap="getCode" :hair-line="false">{{tips}}</u-button>
			</view>
			<u-button shape="circle" type="default" class="login" @click="submit">登录</u-button>
			<view class="register" v-if="loginFs == 0" @click="loginFs = 1">
				忘记密码？<text style="color: #4962EE;">验证码登录</text>
			</view>
			<view class="register" v-if="loginFs == 1" @click="loginFs = 0">
				<text style="color: #4962EE;">密码登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form:{
					account:'',
					password:'',
					captcha:""
				},
				loginFs:0, //0密码登录 1 验证码登录
				tips: '',
				isWeixin: false
			}
		},
		onLoad() {
			this.isWeixin = this.isWechat();
			if (this.isWeixin) {
				this.checkWeChatCode(); //通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】
			}
		},
		computed: {
		},
		methods: {
			//方法：用来判断是否是微信内置的浏览器
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === 'micromessenger';
			},
			//方法:用来提取code
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null;
			},
			//检查浏览器地址栏中微信接口返回的code
			checkWeChatCode() {
				let code = this.getUrlCode('code');
				let state = this.getUrlCode('state');
				if (code) {
					this.getOpenidAndUserinfo(code,state);
				}
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					
					this.$u.post('api/sms/send', {mobile:this.form.account,event:'mobilelogin'}).then(res => {	
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					})
					// setTimeout(() => {
					// 	uni.hideLoading();
					// 	// 这里此提示会被this.start()方法中的提示覆盖
					// 	this.$u.toast('验证码已发送');
					// 	// 通知验证码组件内部开始倒计时
					// 	this.$refs.uCode.start();
					// }, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
					this.$u.toast('倒计时结束');
				},
			start() {
				this.$u.toast('倒计时开始');
			},
			submit() {
				let _this = this;
				if(!_this.$u.test.mobile(_this.form.account)){
					_this.$u.toast("手机号不正确");
					return false;
				}
				
				//验证码登录
				if(_this.loginFs == 1){
					if(!_this.form.captcha){
						_this.$u.toast("验证码不能为空");
						return false;
					}
					let form = _this.form
					form.mobile = _this.form.account
					_this.$u.post('api/user/mobilelogin', form).then(res => {
						let userinfo =  res.userinfo;
						uni.setStorageSync('userinfo', userinfo);
						uni.setStorageSync('token', userinfo.token);
						if (_this.isWeixin && !userinfo.iswechat) {
							_this.getWeChatCode();
						} else {
							_this.goIndex();
						}
					})
				}else{ // 密码登录
					if(!_this.form.password){
						_this.$u.toast("密码不能为空");
						return false;
					}
					//手机号密码登录
					let form = _this.form
					_this.$u.post('api/user/login', form).then(res => {	
						let userinfo =  res.userinfo;
						uni.setStorageSync('userinfo', userinfo);
						uni.setStorageSync('token', userinfo.token);
						
						if (_this.isWeixin && !userinfo.iswechat) {
							_this.getWeChatCode();
						} else {
							_this.goIndex();
						}
					})
				}
			},
			//请求微信接口，用来获取code
			getWeChatCode() {
				let local = window.location.href; //获取当前页面地址作为回调地址
				this.$u.get('/addons/third/Api/getAuthUrl', {url:local, platform:'wechat'}).then(res => {
					window.location.href = res
				});
			},
			//把code传递给后台接口，静默登录
			getOpenidAndUserinfo(code,state) {
				let _this = this;
				_this.$u.get('/addons/third/Api/callback', {
					code: code,
					state: state,
					platform: 'wechat'
				}).then(res => {
					if (res.code != 0) {
						_this.goIndex();
					} else {
						uni.showToast({
							title: res.msg,
							duration: 3000,
							icon: 'none'
						});
						return;
					}
				});
			},
			goIndex() {
				let now_time = new Date().getTime();
				uni.setStorageSync('storage_time', now_time);
				uni.redirectTo({
					url: '/pages/index/index'
				})	
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
	}
	
.wrap {
	background: linear-gradient(#4780F0, #4A45ED);
	height: 100%;
	overflow: hidden;
	.zi{
		font-size: 64rpx;
		font-family: Lantinghei SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 60rpx;
		position: relative;
		z-index: 0;
		margin-top: 144rpx;
		margin-left: 40rpx;
		.zi-dingwei{
			position: absolute;
			z-index: -1;
			left: 60rpx;
			bottom:0;
			width: 180rpx;
			height: 17rpx;
			background: #E89C38;
		}
	}
	.zh{
		margin-left: 40rpx;
		font-size: 55rpx;
		font-family: ZhenyanGB;
		font-weight: 700;
		line-height: 54rpx;
		color: #FFFFFF;
		margin-top: 43rpx;
	}
	.biaodan{
		margin: 86rpx 40rpx;
		background: linear-gradient(to bottom,#fff  70%, #C2C4FC);
		box-shadow: 0rpx 14rpx 8rpx 2rpx rgba(73, 87, 238, 0.08);
		opacity: 0.95;
		border-radius: 40rpx;
		height: 728rpx;
		box-sizing: border-box;
		padding-top: 87rpx;
		.li-item{
			display: flex;
			margin: 0 38rpx;
			align-items: center;
			.item-img{
				height: 26rpx;
				margin-right: 18rpx;
			}
			.li-item-txt{
				line-height: 27rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
			.inputstyle{
				width: 100%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				margin-top:20rpx;
				border-bottom: 2rpx solid #D4D4D4;
				height: 80rpx;
			}
			.plstyle{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		.captcha{
			display: flex;
			justify-content: flex-end;
			text-align: right;
			.captcha-button{
				width: 200rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #2165F7;
				border: 0;
	            background: #fff;
				height: auto;
				margin: 0;
				margin-right: 10rpx;
				padding: 0;
			}
			.captcha-button:after{
				//border: 0;
				background-color: none;
			}
			.captcha-buttonhovwer{
				background-color: #fff;
			}
		}
		.login{
			margin: 80rpx 40rpx 0;
			line-height: 75rpx;
			background: #4961EE;
			color: #fff;
			height: auto;
		}
		.register{
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 45rpx;

		}
	}
	
}

</style>
